<script setup lang="ts">
import Icon from "@/components/Icon.vue";
import { ElButton } from "element-plus";

const { showRefresh = true } = defineProps<{
  showRefresh?: boolean;
  loading?: boolean;
  size?: "large" | "small";
}>();

defineEmits<{
  refresh: [];
}>();
</script>

<template>
  <div class="flex p-4">
    <div class="flex-auto">
      <slot name="tool-left" />
    </div>

    <div class="flex-none mx-3">
      <slot name="tool-right" />
    </div>

    <div class="flex-none">
      <ElButton
        v-if="showRefresh"
        circle
        :size="size"
        @click="$emit('refresh')"
      >
        <Icon
          name="Refresh"
          v-loading="loading"
          style="--el-loading-spinner-size: 16px"
        />
      </ElButton>
    </div>
  </div>
</template>
